<template>
  <div class="set-container">
    <h1>$set</h1>
    <ul>
      <li :class="item.flag ? 'active' : ''" @click="handleClick(item)" v-for="item in list" :key="item.id">
        {{ item.city }}
      </li>
    </ul>
  </div>
</template>
<script>
// 模拟一个接口

const createData = () => {
  return new Promise((resolve, reject) => {
    resolve({
      code: 0,
      msg: 'success',
      list: [
        {
          id: 1,
          city: '上海',
        },
        {
          id: 2,
          city: '北京',
        },
      ],
    })
  })
}

export default {
  data() {
    return {
      list: [
        {
          id: 1,
          city: '上海',
        },
        {
          id: 2,
          city: '北京',
        },
      ],
      tabIndex: 0,
    }
  },
  created() {
    // const res = await createData()
    // console.log(res.list)
    this.list.forEach((item) => {
      // 添加一个属性
      // item.flag = false
      // this.$set 或者 vue.set 就是给后添加的数据，添加get/set属性，vue中，只要有了get/set属性，就能
      // 实现双向数据绑定功能
      this.$set(item, 'flag', false)
    })
  },
  methods: {
    handleClick(item) {
      item.flag = !item.flag
      console.log(this.list, 'list---------')
      // this.tabIndex = index
    },
  },
}
</script>
<style>
.active {
  background: red;
  color: #fff;
}
</style>
